<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="范珍">
    <title>vue进阶--12 路由嵌套</title>
    <script src='vue.js'></script>
    <script src="vue-router.js"></script>
</head>

<body>
    <div id='app'>
        <header>
            <router-link to="/chat">聊天</router-link>
            <router-link to="/friend">好友</router-link>
            <router-link to="/set">设置</router-link>
        </header>
        <router-view></router-view>
    </div>

    <script>
        const chat = {
            template: `<div>
                        <h1>聊天</h1>
                      </div>`
        }
        const friend = {
            template: `<div>
                        <h1>好友</h1>
                      </div>`
        }
        const set = {
            template: `<div>
                        <h1>设置</h1>
                        <p>
                            <router-link to="/set/zone">qq空间权限设置</router-link>
                            <router-link to="/set/friend">添加好友设置</router-link>
                        </p>
                        <router-view></router-view>
                      </div>`
        }

        const zone = {
            template:'<div>这是关于zone的设置</div>'
        }
        const friendset = {
            template:'<div>这是关于friend的设置</div>'
        }

        const router = new VueRouter({
            routes: [
                { path: '/chat', component: chat },
                { path: '/friend', component: friend },
                { 
                    path: '/set', 
                    component: set ,
                    // 子路由 
                    // 路由嵌套 
                    children:[
                        // 会去匹配/set/zone,匹配成功之后会把
                        // zone组件显示在set组件中的router-view所在位置
                        {path:'zone',component:zone},
                        {path:'friend',component:friendset}
                    ]
                },
                { path: '', redirect: '/chat' },
            ]
        });
        new Vue({
            el: '#app',
            router
        })
    </script>
</body>

</html>